<template>
  <div>
    <a-modal v-model:open="open" title="新增字典" @ok="handleOk">
      <a-form
        :model="formState"
        name="basic"
        :label-col="{ style: { width: '70px' } }"
        :wrapper-col="{ style: { width: 'auto' } }"
        autocomplete="off"
        ref="refForm"
      >
        <a-table
          class="custom-table"
          size="small"
          :pagination="pagination"
          :columns="[
            {
              title: 'label',
              dataIndex: 'label',
            },
            {
              title: 'value',
              dataIndex: 'value',
            },
            {
              title: 'actions',
              dataIndex: 'actions',
            },
          ]"
          :data-source="formState.entries"
        >
          <template #bodyCell="{ column, record, index }">
            <template v-if="column.dataIndex === 'label'">
              <a-form-item
                :name="['entries', index, 'label']"
                :rules="{
                  required: true,
                  message: '',
                }"
              >
                <a-input v-model:value.trim="record.label"></a-input>
              </a-form-item>
            </template>
            <template v-if="column.dataIndex === 'value'">
              <a-form-item
                :name="['entries', index, 'value']"
                :rules="{
                  required: true,
                  message: '',
                }"
              >
                <a-input v-model:value.trim="record.value"></a-input>
              </a-form-item>
            </template>
            <template v-if="column.dataIndex === 'actions'">
              <template v-if="index == 0">
                <a-button style="margin: auto" type="link" size="small" @click="addEntriesItem"
                  >add
                </a-button>
              </template>
              <template v-if="index > 0">
                <a-button
                  style="margin: auto"
                  type="link"
                  danger
                  size="small"
                  @click="delEntriesItem(index)"
                  >del
                </a-button>
              </template>
            </template>
          </template>
        </a-table>
      </a-form>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
import { ref, defineEmits } from 'vue'
import {
  type CreateDictDto,
  dictOptionsApi,
  updateDictApi,
} from '@/api/dict.api.ts'

const emits = defineEmits(['editOk'])

const open = ref<boolean>(false)
const Record = ref()

const showModal = (record: CreateDictDto) => {
  open.value = true
  Record.value = { ...record }
  getList()
}

const handleOk = () => {
  refForm.value.validateFields().then(() => {
    updateDictApi(Record.value.id, formState.value).then(() => {
      open.value = false
      emits('editOk')
    })
  })
}

const formState = ref<{ entries: CreateDictDto['entries'] }>({
  entries: [
    {
      label: '',
      value: '',
    },
  ],
})

const refForm = ref()
const addEntriesItem = () => {
  const validateFields = formState.value.entries
    .map((_, index) => [
      ['entries', index, 'label'],
      ['entries', index, 'value'],
    ])
    .flat()
  refForm.value.validateFields(validateFields).then(() => {
    formState.value.entries.push({
      value: '',
      label: '',
    })
  })
}
const delEntriesItem = (index: number) => {
  formState.value.entries.splice(index, 1)
}

const pagination = ref({
  pageSize: 5,
})

const getList = () => {
  dictOptionsApi(Record.value.type).then((res) => {
    formState.value.entries = res.entries
  })
}

defineOptions({
  name: 'EditDictModal',
})
defineExpose({
  showModal,
})
</script>

<style scoped>
.custom-table .ant-form-item {
  margin-bottom: 0;
}
</style>
